<template>
  <div class="organization-container">
    <el-tree :data="dataTree" :expand-on-click-node="false" default-expand-all :props="defaultProps" @node-click="handleNodeClick">
      <template v-slot="{ data }">
        <el-row class="custom-tree-node" style="display:flex;justify-content: space-between;width: 100%;">
          <el-col>{{ data.name }}</el-col>
          <el-col :span="4">
            <span style="margin-right: 30px;">{{ data.managerName }}</span>
            <span>
              <el-dropdown @command="handleCommand($event,data.pid)">
                <span class="el-dropdown-link">
                  操作<i class="el-icon-arrow-down el-icon--right" />
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="add">添加子部门</el-dropdown-item>
                  <el-dropdown-item command="edit">编辑部门</el-dropdown-item>
                  <el-dropdown-item command="del">删除</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </span>
          </el-col>
        </el-row>
      </template>
    </el-tree>
    <AddDept :show-dialog.sync="dialogFormVisible" :pid="currentId" @updateDep="getDepartmentList" />
  </div>
</template>

<script>
import { getDepartmentList } from '@/api/company'
import { intoTree } from '@/utils/index'
import AddDept from './components/AddDept.vue'
export default {
  components: {
    AddDept
  },
  data() {
    return {
      dataTree: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      dialogFormVisible: false,
      formLabelWidth: '100px',
      currentId: '' // 传给appDep组件的本层的id
    }
  },
  created() {
    this.getDepartmentList()
  },
  methods: {
    handleNodeClick(data) {
      // console.log(data)
    },
    async getDepartmentList() {
      const res = await getDepartmentList()

      this.dataTree = intoTree(res, 0)
      // console.log('thisaaa', this.dataTree)
    },
    handleCommand(command, id) {
      if (command === 'add') {
        // console.log('command', command)
        // console.log('id', typeof id)
        this.dialogFormVisible = true
        this.currentId = id + ''
      }
    }

  }
}

</script>

<style lang="scss" scoped>
.organization-container{
  width: 100%;
  height: 100%;
  margin: 20px;
  padding: 20px;
  background-color: #fff;
  ::v-deep .el-tree-node__content{
    height: 40px;
    margin: 0 200px;

    // line-height: 40px;
  }
  // ::v-deep span.custom-tree-node span:first-child{
  //   margin-right: 30px;
  // }
  ::v-deep .el-tree-node__content:hover{
    background-color: #f0f4ff;
    color: #706ffb;
  }
}
</style>
